<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String contextPath = request.getContextPath();
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String username = "";
	String userpwd = "";
	String checked = "";

	//读取cookies
	Cookie[] cookies = request.getCookies();
	if (cookies != null) {
		for (Cookie c : cookies) {
			//判断key
			if (c.getName().equals("username")) {
				username = c.getValue();
			} else if (c.getName().equals("userpwd")) {
				userpwd = c.getValue();
			} else if (c.getName().equals("checked")) {
				checked = c.getValue();
			}
		}
	}
	//把参数储存在作用域中
	pageContext.setAttribute("username", username);
	pageContext.setAttribute("userpwd", userpwd);
	pageContext.setAttribute("checked", checked);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath }/css/login.css"
	rel="stylesheet">
</head>
<body>
	<div id="container">
		<div id="output">
			<div class="containerT">
				<h1>用户登录</h1>
				<form class="form" id="entry_form"
					action="${pageContext.request.contextPath }/UserController?op=login"
					method="post">
					<input type="text" placeholder="用户名" id="uname" name="uname"
						required autofocus value="${username }" />
					<!-- 显示用户名的提示 -->
					<label id="userNameId"></label> <input type="password"
						placeholder="密码" id="upwd" name="upwd" required
						value="${userpwd }" />
					<!--显示密码的提示-->
					<label id="userPwdId"></label>
					<!-- <label for="ucheck"><a href="">获取验证码</a></label> -->
					<div class="divW">
						<label for="ucheck">验证码&nbsp;&nbsp;&nbsp;&nbsp;<img
							style="vertical-align: middle;" id="checkCode"
							src="${pageContext.request.contextPath }/UserController?op=createCode"></label>
					</div>
					<label></label> <input type="text" id="ucheck" name="ucheck"
						placeholder="请输入验证码..."> 
					<!--显示验证码的提示-->	
					<label id="ucheckId" style="color:green"></label>
					<div id="remember">
						<p>
							<c:if test="${checked eq 'checked' }">
								<input type="checkbox" value="remember-me" name="remember-me"
									checked style="vertical-align: -3px;" />记住密码
                            </c:if>
							<c:if test="${checked != 'checked' }">
								<input type="checkbox" value="remember-me" name="remember-me"
									style="vertical-align: -3px;" />记住密码
                            </c:if>
						</p>
					</div>
					<button type="submit" id="entry_btn">登录</button>
					<div id="prompt" class="prompt"></div>
				</form>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/vector.js"></script>
<script type="text/javascript">
	$(function() {
		//登录背景函数
		Victor("container", "output");
		$("#uname").focus();
		$(document).keydown(function(event) {
			if (event.keyCode == 13) {
				$("#entry_btn").click();
			}
		});
		//判断用户名是否为空
		$("#uname").blur(function() {
			if ($("#uname").val().trim() != "") {
				$("#userNameId").html("")
			} else {
				$("#userNameId").html("<font color='red'>用户名不能为空</font>")
			}
		});
		//判断密码是否为空
		$("#upwd").blur(function() {
			if ($("#upwd").val().trim() != "") {
				$("#userPwdId").html("")
			} else {
				$("#userPwdId").html("<font color='red'>密码不能为空</font>")
			}
		});
		 //验证码
  		 $("#ucheck").blur(function(){
 			 //判断验证码是否为空
   		   if( $("#ucheck").val().trim()==""){
   			  $("#ucheckId").html("<font color='red'>验证码不能为空</font>");
   		   }else{
   			   $.post("${pageContext.request.contextPath }/UserController",{checkNum: $("#ucheck").val(),op:"checkCode"},function(data){
   				   //把返回来的数据显示在提示标签上
   				   $("#ucheckId").html(data);   				   
   			   })	    			   
   		   } 
 		 }); 
		 $("#entry_form").submit(function(){
			 if($("#userPwdId").text("") && $("#userNameId").text("") && $("#ucheckId").text("验证通过")){
				 return true;
			 }
			 return false;
		 })
		 
	})
	/*
		验证码分析：
		点击超链接或者图片，需要换一张
		1.给超链接和图片取绑定点击事件
		2.重新设置图片的src值
	*/
	window.onload=function(){
		//获取图片对象
		var img=document.getElementById("checkCode");
		//绑定单击事件
		img.onclick=function(){
			//加时间戳
			var date=new Date().getTime();
			img.src="${pageContext.request.contextPath }/UserController?op=createCode&?"+date;  //时间戳永不重复
		}
	}
</script>
</html>